<template>
  <div class="config">
    <a-card title="抢票策略配置" :bordered="false">
      <a-form :model="configForm" :rules="rules" ref="configFormRef" layout="vertical">
        <a-form-item label="请求频率(ms)" name="requestInterval">
          <a-input-number
            v-model:value="configForm.requestInterval"
            :min="100"
            :max="10000"
            :step="100"
          />
        </a-form-item>
        
        <a-form-item label="重试次数" name="retryCount">
          <a-input-number
            v-model:value="configForm.retryCount"
            :min="0"
            :max="10"
          />
        </a-form-item>
        
        <a-form-item label="重试间隔(ms)" name="retryInterval">
          <a-input-number
            v-model:value="configForm.retryInterval"
            :min="100"
            :max="5000"
            :step="100"
          />
        </a-form-item>
        
        <a-form-item label="并发请求数" name="concurrentRequests">
          <a-input-number
            v-model:value="configForm.concurrentRequests"
            :min="1"
            :max="10"
          />
        </a-form-item>
        
        <a-form-item label="请求超时(ms)" name="timeout">
          <a-input-number
            v-model:value="configForm.timeout"
            :min="1000"
            :max="30000"
            :step="1000"
          />
        </a-form-item>
        
        <a-form-item label="自动重试" name="autoRetry">
          <a-switch v-model:checked="configForm.autoRetry" />
        </a-form-item>
        
        <a-form-item label="请求头配置" name="headers">
          <a-textarea
            v-model:value="configForm.headers"
            :rows="4"
            placeholder="请输入JSON格式的请求头配置"
          />
        </a-form-item>
        
        <a-form-item>
          <a-space>
            <a-button type="primary" @click="saveConfig">
              保存配置
            </a-button>
            <a-button @click="resetConfig">
              重置
            </a-button>
          </a-space>
        </a-form-item>
      </a-form>
    </a-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { message } from 'ant-design-vue'

const configFormRef = ref(null)

const configForm = reactive({
  requestInterval: 1000,
  retryCount: 3,
  retryInterval: 1000,
  concurrentRequests: 3,
  timeout: 5000,
  autoRetry: true,
  headers: JSON.stringify({
    'User-Agent': 'Mozilla/5.0',
    'Content-Type': 'application/json'
  }, null, 2)
})

const rules = {
  requestInterval: [{ required: true, message: '请输入请求频率' }],
  retryCount: [{ required: true, message: '请输入重试次数' }],
  retryInterval: [{ required: true, message: '请输入重试间隔' }],
  concurrentRequests: [{ required: true, message: '请输入并发请求数' }],
  timeout: [{ required: true, message: '请输入请求超时时间' }]
}

const saveConfig = () => {
  configFormRef.value.validate().then(() => {
    try {
      // 验证headers是否为有效的JSON
      JSON.parse(configForm.headers)
      message.success('配置保存成功')
    } catch (e) {
      message.error('请求头配置必须是有效的JSON格式')
    }
  })
}

const resetConfig = () => {
  configFormRef.value.resetFields()
}
</script>

<style scoped>
.config {
  padding: 24px;
}
</style> 